<template>
    <div :class="{'input-box':true, 'active':isActive}">
        <input type="text" ref="input" :placeholder="placeLabel" @focus="inputFocus" @blur="inputBlur" v-bind:value="value" v-on:input="handleValueChange($event.target.value)">
    </div>
</template>
<script type="text/ecmascript-6">
export default {
    name: 'vInput',
    props: {
        placeLabel: String,
        value: String
    },
    data () {
        return {
            isActive: false
        }
    },
    methods: {
        inputFocus () {
            this.isActive = true
        },
        inputBlur () {
            this.isActive = false
            this.$emit('blur', '')
        },
        handleValueChange (val) {
            let formatVal = val.trim()
            if (formatVal !== val) {
                this.$refs.input.value = formatVal
            }
            this.$emit('input', formatVal)
        }
    }
}
</script>
<style lang="stylus">
.input-box
    min-height 44px
    border-bottom 1px solid #eee
    position relative
    & > input
        display block
        width 100%
        padding 10px 0
        line-height 24px
        border 0 none
    &:after
        content ''
        position absolute
        left 0
        right 100%
        height 1px
        bottom 0
        transition right .3s linear
    &.active:after
        right 0
        background #016DFB
.is-error
    .input-box
        &:after
            right 0
            background #ff0000
.is-success
    .input-box
        &:after
            right 0
            background #00ff00
</style>
